<template>
	<view class="pageContent">
		
		<view class="loginM" v-if="!token">
			<image class="loginMIco" :src="images +'/loginMIco.png'" />
			<button class="btOne loginMBt" @click="loginRed">请先验证身份登录</button>
		</view>
		<view class="remote" v-if="token">
			<div class="topPalce">
				<picker @change="periodChange" :range="period" :value="periodIndex" range-key="name">
					<view class="payTypeInput" v-if=" periodId=='' ">所有场地</view>
					<view class="payTypeInput" v-else>
						{{`${period[periodIndex].name}/${period[periodIndex].boxAmount}台`}}
					</view>
					<div class="arrow"></div>
					<!-- <image class="payTypeArrow" src="{{ images + '/down_arrow.png' }}"></image> -->
				</picker>
			</div>
			<view class="remoteMa">
				<view class="remoteMain" @click="selectTap(index)" v-for="(item,index) in emptyList" :key="index">
					<div class="repWorkerOrder-item">
						<span>设备编号</span>
						<span>{{item.imei}}</span>
					</div>
					<div class="repWorkerOrder-item">
						<span>场地名称</span>
						<span>{{item.siteName}}</span>
					</div>
					<div class="repWorkerOrder-item">
						<span>楼层编号</span>
						<span>{{item.position}}</span>
					</div>

					<div class="agoodsName">
						<p v-for="(agoods,index) in item.goods" :key="index" v-if="agoods.name">
							<span>{{agoods.name}}</span>
							<span style="color:#6D92FF;">1</span>
						</p>
					</div>
				</view>
			</view>

			<div class="repWorkerOrder-total">
				<div>
					共补货
					<span>{{totalNumber}}</span> 件
				</div>
				<div class="repToWorker" @click="replenishment" :class="[totalNumber==0?'isActive':'']">去补货</div>
			</div>

		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				period: [{
					id: 3,
					name: '3个月'
				}, {
					id: 6,
					name: '6个月'
				}, ],
				periodIndex: 0,
				periodId: '',
				emptyList: [],
				totalNumber: 0,
				token: 0,
				installNum: 0, //总共多少件
			}
		},
		onLoad() {
			console.log('index-onLoad')
		},
		onShow() {
			var token = wx.getStorageSync('token')
			this.token = token
			if (token) {
				this.query()
				this.queryEmpty()
				// this.queryGoods()
			}
		},
		methods: {
			testEmptyList() {
				var item = {
					"id": 4894,
					"imei": "6513657745",
					"position": "0999",
					"activeStatus": true,
					"status": true,
					"siteId": 92,
					"agentId": 26,
					"activeTime": "2020-07-09 18:54:37",
					"activeUserId": 120,
					"createTime": "2020-07-07 21:22:30",
					"iotDeviceName": "867814043528419",
					"iotOnlie": false,
					"iotOnlineTime": "2020-09-02 20:05:40",
					"siteName": "深圳测试",
					"goods": [{
						"name": "情趣内衣均码1套，款式随机",
						"supplier": "湖南长沙",
						"amount": 0,
						"boxId": 4894,
						"doorNo": 1
					}]
				}
				this.emptyList[0] = item
			},
			periodChange(e) {
				// console.log('periodChange', e)
				var value = e.detail.value;
				var id = this.period[value].id
				console.log('periodChange', value, id)
				this.periodIndex = value
				this.periodId = id
				this.queryEmpty()
			},
			// 查询场地设备
			async query() {
				var url = '/agent/site/query'
				var params = {

				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				this.period = param.result
				//添加所有场地选择项
				var lastItem = {
					"id": "",
					"name": "所有场地",
				}
				this.period.push(lastItem)
				console.log('this.period', this.emptyList)
			},
			// 查询场地设备
			async queryGoods() {
				var url = '/box/queryGoods'
				var code="4280046158"
				var params = {
					code
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				console.log('queryGoods', param)
			},

			// 查询待补货
			async queryEmpty() {
				var url = '/agent/boxadmin/queryEmpty'
				var params = {
					siteId: this.periodId
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				var result = param.result
				this.emptyList = result
				let num = 0
				if (result.length) {
					result.forEach(item => {
						num += item.goods.length;
					})
				}
				this.totalNumber = num
			},
			
			replenishment(){
				uni.navigateTo({
					url: '/pages/index/replenishmentList'
				})
			},

			selectTap(index) {
				switch (index) {
					case 0:
						wx.navigateTo({
							url: '/pages/index/install'
						})
						break;
					case 1:
						wx.navigateTo({
							url: '/pages/index/myOrder'
						})
						break;
					case 2:
						wx.navigateTo({
							url: '/pages/index/deviceManager'
						})
						break;
					default:
						break;
				}
			},
			loginRed() {
				uni.redirectTo({
					url: '/pages/index/login1'
				})
			},
		},

	}
</script>

<style>
	.pageContent {}


	.loginM {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 250rpx 0rpx 0rpx 0rpx;
	}

	.loginMIco {
		width: 240rpx;
		height: 270rpx;
	}

	.loginMBt {
		width: 70%;
		margin: 50rpx 0rpx 0rpx 0rpx;
	}

	.remote {
		/* text-align: center; */
	}


	.topPalce,
	.remoteMain {
		/* width: 120rpx; */
		/* height: 120rpx; */
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 3px 3px 0px rgba(114, 96, 255, 0.1);
		font-size: 30rpx;
		padding: 10rpx 20rpx 0rpx 20rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
		/* border: 1px solid #666; */
	}

	.topPalce {
		padding: 20rpx 20rpx 20rpx 0rpx;
		margin-top: 20rpx;
	}

	.payTypeInput {
		padding-left: 20rpx;
		font-size: 32rpx;
		border-left: 8rpx solid #6d92ff;
	}
	
	.remoteMa {
		padding: 10rpx 0rpx 0rpx 0rpx;
		/* border: 1px solid #f00; */
	}

	.arrow {
		float: right;
		margin-top: -32rpx;
		margin-right: 16rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.repWorkerOrder-item {
		height: 58rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.repWorkerOrder-item>span:first-child {
		margin-right: 20rpx;
	}

	.agoodsName>p {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0rpx 10rpx 0rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.repWorkerOrder-total {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		box-shadow: 0 -6px 4px -4px rgba(0, 85, 255, 0.1);
		font-size: 30rpx;
		z-index: 99;
	}

	.repWorkerOrder-total>div:nth-child(1) {
		margin-left: 50rpx;
	}

	.repToWorker {
		display: flex;
		align-items: center;
		height: 100%;
		background: #6d92ff;
		color: #fff;
		margin-left: auto;
		padding: 0rpx 50rpx;
	}

	.repToWorker.isActive {
		background-color: #979eb2 !important;
		color: #5c616d !important;
	}
</style>
